<template>
    <form @submit.prevent="handleSubmit" class="account-login-form">
        <div class="form-title">{{ PAGE_TITLE }}</div>
        <div class="form-error" :style="errorMessage ? 'opacity:1;' : ''">{{ errorMessage }}</div>
        <!-- 账号 -->
        <div class="input-group">
            <input v-model="formData.username" type="text" class="form-input lang-input"
                :placeholder="FORM_PLACEHOLDERS.USERNAME" />
        </div>
        <!-- 密码 -->
        <div class="input-group">
            <input id="passwordNew" v-model="formData.password" :type="passwordState.type" class="form-input lang-input"
                :placeholder="FORM_PLACEHOLDERS.PASSWORD" />
            <a style="cursor:pointer" @click="passwordState.changeType" class="password-toggle">
                <span id="passwordImgNew" :class="passwordState.type == 'password' ? 'icon-t-eye-close' : 'icon-t-eye'"
                    style="width:20px;"></span>
            </a>
        </div>
        <div class="login-type">
            <span @click="handleLoginTypeChange('sms')"> <i class="icon-t-mobile"></i> {{ '短信验证码登录' }}</span>
            <span @click="handleLoginTypeChange('forget')"> {{ '忘记密码' }}</span>
        </div>
        <button type="submit" class="submit-btn" :disabled="loading">
            <span v-if="loading" class="loading-spinner"></span>
            {{ loading ? FORM_LABELS.LOGIN_BUTTON_LOADING : FORM_LABELS.LOGIN_BUTTON }}
        </button>
    </form>
</template>

<script setup>
import { reactive, defineProps, defineEmits } from 'vue'
import {
    FORM_LABELS,
    FORM_PLACEHOLDERS,
    DEFAULT_LOGIN_FORM,
    ERROR_MESSAGES,
    PAGE_TITLE
} from '@/constants/login.js'

// 定义 props
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    errorMessage: {
        type: String,
        default: ''
    }
})

// 定义 emits
const emit = defineEmits(['submit', 'error'])

// 表单数据
const formData = reactive({ ...DEFAULT_LOGIN_FORM })

// 密码显示状态管理
const passwordState = reactive({
    type: 'password',
    changeType () {
        this.type = this.type === 'password' ? 'text' : 'password'
    }
})


const handleLoginTypeChange = (type) => {
    emit('loginTypeChange', type)
}

// 表单提交处理
const handleSubmit = () => {
    // 基础验证
    if (!formData.username) {
        emit('error', ERROR_MESSAGES.USERNAME_REQUIRED)
        return
    }
    if (!formData.password) {
        emit('error', ERROR_MESSAGES.PASSWORD_REQUIRED)
        return
    }

    // 清除错误信息
    emit('error', '')
    // 发送表单数据给父组件
    emit('submit', { ...formData })
}

// 重置表单
const resetForm = () => {
    Object.assign(formData, DEFAULT_LOGIN_FORM)
}

// 暴露方法给父组件
defineExpose({
    resetForm,
    formData
})
</script>

<style lang="scss" scoped>
.login-type {
    width: 100%;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;

    span {
        color: #212121;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        &:hover {
            color: var(--theme-color);
        }
    }
}

.account-login-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}

.lang-input {
    width: 100%;
}

/* 去除自动填充时的背景色 */
.lang-input:-webkit-autofill,
.lang-input:-webkit-autofill:hover,
.lang-input:-webkit-autofill:focus,
.lang-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #212121 !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

.password-toggle {
    cursor: pointer;
}

.eye-icon-open,
.eye-icon-close {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.remember-group {
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}

.checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-text {
    user-select: none;
}

.input-group {
    height: 43px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
}

.form-input {
    min-width: 180px;
    outline: none;
    border: none;
    font-size: 14px;
    color: #212121;
}

.form-error {
    min-height: 20px;
    line-height: 20px;
    font-size: 12px;
    opacity: 0;
    color: red;
    word-wrap: break-word;
    word-break: keep-all;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    bottom: 2px;
}

.submit-btn {
    height: 44px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;

    &:hover:not(:disabled) {
        background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    }

    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }
}

.form-title {
    font-size: 20px;
    color: #262626;
    text-align: center;
    font-weight: 700;
    padding-bottom: 16px;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
</style>